<template>
	<view class="tn-padding-left-sm tn-padding-right-sm tn-bg-white tn-flex tn-flex-wrap tn-flex-row-between">
				<view class="nav_bg nav_item tn-shadow-warp tn-bg-red tn-flex tn-flex" @click="toPage(1)">
					<view class="">
						<view>在线考试</view>
						<view class="tn-text-sm tn-padding-top-xs tip">
							前往考试
							<text class="tn-icon-right tn-padding-left-xs"></text>
						</view>
					</view>
					<view class="tn-info-item-right">
						<view class="tn-icon-edit-form"></view>
					</view>
				</view>

				<view class="nav_bg nav_item tn-shadow-warp tn-bg-orange" @click="toPage(2)">
					<view class="">
						<view>课程学习</view>
						<view class="tn-text-sm tn-padding-top-xs tip">
							前往学习
							<text class="tn-icon-right tn-padding-left-xs"></text>
						</view>
					</view>
					<view class="tn-info-item-right">
						<view class="tn-icon-video-square"></view>
					</view>
				</view>
				<view class="nav_bg nav_item tn-shadow-warp tn-bg-purple" @click="toPage(3)">
					<view class="">
						<view>现场救援</view>
						<view class="tn-text-sm tn-padding-top-xs tip">
							前往救援
							<text class="tn-icon-right tn-padding-left-xs"></text>
						</view>
					</view>
					<view class="tn-info-item-right">
						<view class="tn-icon-taxi"></view>
					</view>
				</view>
				<view class="nav_bg nav_item tn-shadow-warp tn-bg-blue" @click="toPage(4)">
					<view class="">
						<view>救援回访</view>
						<view class="tn-text-sm tn-padding-top-xs tip">
							前往回访
							<text class="tn-icon-right tn-padding-left-xs"></text>
						</view>
					</view>
					<view class="tn-info-item-right">
						<view class="tn-icon-service"></view>
					</view>
				</view>
				<view class="nav_bg nav_item tn-shadow-warp tn-bg-purplered" @click="toPage('lupei')">
					<view class="">
						<view>路赔文书</view>
						<view class="tn-text-sm tn-padding-top-xs tip">
							前往路赔
							<text class="tn-icon-right tn-padding-left-xs"></text>
						</view>
					</view>
					<view class="tn-info-item-right">
						<view class="tn-icon-inventory"></view>
					</view>
				</view>
        <view class="nav_bg nav_item tn-shadow-warp tn-bg-purplered" @click="toPage('xuncha')">
          <view class="">
            <view>巡查记录</view>
            <view class="tn-text-sm tn-padding-top-xs tip">
              前往路赔
              <text class="tn-icon-right tn-padding-left-xs"></text>
            </view>
          </view>
          <view class="tn-info-item-right">
            <view class="tn-icon-fold"></view>
          </view>
        </view>
			</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
    methods: {
      toPage(val) {
        if (val === 1) {
          uni.switchTab({
            url: '/pages/exam/exam'
          });
        } else if (val === 2) {
          uni.switchTab({
            url: '/pages/training/training'
          });
        }
        if (val === 3) {
          uni.navigateTo({
            url: '/pages/rescue/rescue'
          });
        } else if (val === 4) {
          uni.navigateTo({
            url: '/pages/visit/list'
          });
        } else if (val === 'lupei') {
          uni.navigateTo({
            url: '/pages/roadCompensation/index'
          });
        } else if (val === 'xuncha') {
          uni.navigateTo({
            url: '/pages/inspections/index'
          });
        }
      }
    }
	}
</script>

<style lang="scss" scoped>
.nav_item {
  width: calc(50% - 10rpx);
  margin-top: 25rpx;
  padding: 36rpx 26rpx;
  border-radius: 6px;
  display: flex;
  align-items: center;
  color: white;
  .tip {
    color: hsla(0, 0%, 100%, 0.5);
  }
  .tn-info-item-right {
    position: absolute;
    right: 0px;
    top: 56rpx;
    font-size: 42px;
    width: 46px;
    height: 46px;
    text-align: center;
    line-height: 25px;
    opacity: 0.3;
  }
}
.icon {
  padding: 16rpx;
  border-radius: 28rpx;
  background-color: darkblue;
  color: white;
  margin-right: 10rpx;
  font-size: 46rpx;
}
.nav_bg {
  background-image: url('/static/index/item-bg.png');
  background-size: 100% 100%;
}
.card {
  padding: 0px !important;
  margin: 0 !important;
  border-radius: 6px;
  margin-top: 15px !important;
  box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.07) !important;

  ::v-deep {
    .uni-card__content {
      padding: 0 !important;
    }
    .uni-card__header {
      .uni-card__header-box {
        .uni-card__header-content-title {
          font-size: 32rpx;
          font-weight: bold;
        }
      }
    }
    .title {
      color: #333;
      line-height: 1.5em;
      font-size: 32rpx;
      font-weight: bold;
    }

    .value {
      color: $tn-color-gray;
    }
  }
}
</style>
